<template>
  <var-dialog v-model:show="internalShow" :title="title" @confirm="onConfirm" @cancel="onCancel" @closed="onClosed">
    <slot>{{ message }}</slot>
  </var-dialog>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'Dialog',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
    message: {
      type: String,
      default: '',
    },
  },
  emits: ['update:show', 'confirm', 'cancel', 'closed'],
  setup(props, { emit }) {
    const internalShow = ref(props.show);

    watch(() => props.show, (newVal) => {
      internalShow.value = newVal;
    });

    watch(internalShow, (newVal) => {
      if (newVal !== props.show) {
        emit('update:show', newVal);
      }
    });

    const onConfirm = () => {
      emit('confirm');
      internalShow.value = false;
    };

    const onCancel = () => {
      emit('cancel');
      internalShow.value = false;
    };

    const onClosed = () => {
      emit('closed');
    };

    return {
      internalShow,
      onConfirm,
      onCancel,
      onClosed,
    };
  },
});
</script>

<style scoped>
/* 您可以在此处添加自定义样式 */
</style>